<template>
  <vxe-grid
    ref="xTable"
    border
    resizable
    keep-source
    align="center"
    auto-resize
    :height="300"
    :edit-rules="validRules"
    :edit-config="hasAdd?{trigger: 'click', mode: 'row',autoClear:false, showStatus: true}:false"
    :toolbar-config="hasAdd?{slots: { buttons: 'toolbar_buttons'}}:false"
    :columns="columns"
    :data="dataSource"
    @checkbox-all="onSelectChange"
    @checkbox-change="onSelectChange"
  >
    <template v-slot:toolbar_buttons v-if="hasAdd">
      <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
      <a-dropdown v-if="selectionRows.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
        </a-menu>
        <a-button>批量操作<a-icon type="down" /></a-button>
      </a-dropdown>
    </template>
    <template v-slot:price="{ row }">
      <a-input type="number" v-model="row.price" />
      <!-- <a-input type="number" v-model="row.price">
        <a-select slot="addonAfter" default-value="1" style="width: 120px">
          <a-select-option value="1">元/平米</a-select-option>
          <a-select-option value="2">元</a-select-option>
        </a-select>
      </a-input> -->
    </template>
    <template v-slot:startDate="{ row }">
      <a-date-picker v-model="row.startDate" />
    </template>
    <!-- <template v-slot:startDateText="{row}" >
      <span>{{row.startDate?moment(row.startDate).format('YYYY-MM-DD'):''}}</span>
    </template> -->
    <template v-slot:endDate="{ row }">
      <a-date-picker v-model="row.endDate"  />
    </template>
    <template v-slot:collectionDate="{ row }">
      <a-date-picker v-model="row.collectionDate" />
    </template>
    <template v-slot:cycle="{ row }">
      <j-dict-select-tag
        v-model="row.cycle"
        placeholder="请选择"
        dict-code="xy_park_contract_cycle"
      >
      </j-dict-select-tag>
    </template>
    <template v-slot:costType="{ row }">
      <j-popup
        v-model="row.costType"
        org-fields="cost_type,cost_name,tax_rate"
        dest-fields="costType,costName,taxRate"
        field="costType"
        code="v_xy_park_cost_type"
        :trigger-change="true"
        @callback="(value) => popCallback(value,row)"
      />
    </template>
  </vxe-grid>
</template>
<script >
import moment from 'moment'
export default {
  name: 'ContractCostItemsTable',
  props: {
    hasAdd: {
      type: Boolean,
      default: true
    },
    dataSource: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'startDate', title: '账单开始时间', editRender: {}, slots: { edit: 'startDate', default: ({ row }) => {
          return row.startDate ? moment(row.startDate).format('YYYY-MM-DD') : ''
        } }},
        { field: 'endDate', title: '账单结束时间', editRender: {}, slots: { edit: 'endDate', default: ({ row }) => {
          return row.endDate ? moment(row.endDate).format('YYYY-MM-DD') : ''
        } }},
        { field: 'collectionDate', title: '应收日期', editRender: {}, slots: { edit: 'collectionDate', default: ({ row }) => {
          return row.collectionDate ? moment(row.collectionDate).format('YYYY-MM-DD') : ''
        } }},
        { field: 'costType', title: '费项', editRender: {}, slots: { edit: 'costType', default: ({ row }) => {
          return row.costType
        } }},
        { field: 'costName', title: '费项明细' },
        { field: 'price', title: '金额', editRender: {}, slots: { edit: 'price' }}
      ],
      validRules: {
        startDate: [
          { required: true, message: '请填写账单开始时间', trigger: 'change' },
          { validator: this.startDateValid, trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请填写账单结束时间', trigger: 'change' },
          { validator: this.endDateValid, trigger: 'change' }
        ],
        collectionDate: [
          { required: true, message: '请填写应收日期', trigger: 'change' }
        ],
        costType: [
          { required: true, message: '请填写费项类型', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请填写金额', trigger: 'change' }
        ]
      },
      selectionRows: [],
      selectedRowKeys: []
    }
  },
  methods: {
    moment,
    startDateValid({ cellValue, row }) {
      if (!row.endDate) {
        return false
      }
      if (moment(cellValue).isAfter(moment(row.endDate))) {
        return new Error('开始时间不能大于结束时间')
      }
    },
    endDateValid({ cellValue, row }) {
      if (!row.startDate) {
        return false
      }
      if (moment(cellValue).isBefore(moment(row.startDate))) {
        return new Error('开始时间不能大于结束时间')
      }
    },
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    fullValidate() {
      return this.$refs.xTable.fullValidate()
    },
    handleAdd() {
      this.$refs.xTable.insertAt({}, -1)
    },
    handleDelete(row) {
      this.$refs.xTable.remove(row)
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    },
    popCallback(value, row) {
      row.costName = value.costName
      row.costType = value.costType
    }
  }
}
</script>
